<template>
	<view>
		<view class="blog-list-container">
			<view class="blog-item-container" v-for="item in blogList" :key="item.blog.blogId" @click="toBlogInfo(item.blog.blogId)">
				<image class="blog-image" :src="item.blog.blogImage"></image>
				<view class="blog-item">
					<view class="blog-title">
						{{item.blog.blogTitle}}
					</view>
					<view class="blog-meta-container">
						<view class="blog-meta">
							<image class="blog-meta-icon" src="/static/icons/shijian.png"></image>
							<text class="blog-meta-text">{{item.blog.createdTime | parseTimeToDate(item.blog.createdTitle)}}</text>
						</view>
						<view class="blog-meta">
							<image class="blog-meta-icon" src="/static/icons/yuedu.png"></image>
							<text class="blog-meta-text">{{item.blog.blogRead}}</text>
						</view>
						<view class="blog-meta">
							<image class="blog-meta-icon" src="/static/icons/huifu.png"></image>
							<text class="blog-meta-text">{{item.blog.blogComment}}</text>
						</view>
						<view class="blog-meta">
							<image class="blog-meta-icon" src="/static/icons/dianzan.png"></image>
							<text class="blog-meta-text">{{item.blog.blogGoods}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<blog-reach-bottom v-if="!hasData"></blog-reach-bottom>
		<copyright></copyright>
	</view>
</template>

<script>
	import blogApi from '@/api/blog.js'
	export default {
		data() {
			return {
				hasData: true, // 有数据
				paramPage: {
					currentPage: 1,
					pageSize: 10
				},
				blogList: []
			}
		},
		filters: {
			parseTimeToDate(time) {
				// 将时间字符串转换为日期字符串
				if(time) {
					return time.split(' ')[0]
				}
				return ''
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initData();
		},
		// 上拉刷新
		onReachBottom() {
			if(this.hasData) {
				this.paramPage.currentPage = this.paramPage.currentPage + 1;
				this.getBlogList();
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			//初始化数据
			initData() {
				this.paramPage = {
					currentPage: 1,
					pageSize: 10
				};
				this.blogList = [];
				this.getBlogList();
				//关闭下拉刷新
				uni.stopPullDownRefresh();
			},
			//点击某一项进入博客详情
			toBlogInfo(id) {
				uni.navigateTo({
					url: `/pages/blog-info/blog-info?id=${id}`
				})
			},
			// 查询博客列表
			getBlogList() {
				blogApi.getCollectionList(this.paramPage).then(res=>{
					let dataList = res.data.list;
					if(dataList[0]) {
						// 追加数据
						this.hasData = true;
						this.blogList.push(...dataList);
					}else {
						this.hasData = false;
					}
				})
			}
		}
	}
</script>

<style>
@import url("./index.css");
</style>
